import * as echarts from 'echarts';
import { onMounted, watch, computed, watchEffect } from 'vue';

const formatData = (data: any) => {
  const arr: any = [];
  const legend: any = [];
  Object.keys(data).forEach((key: any) => {
    legend.push(`${key}(${data[key]})`);
    arr.push({ value: data[key], name: `${key}(${data[key]})` });
  });
  return {
    legend: legend,
    data: arr,
  };
};
const Comp = (props: any) => {
  const { isRose, id, data, key } = props;
  watchEffect(
    () => {
      const _data = data[key];
      const myChart = echarts.init(document.getElementById(id) as any);
      if (_data) {
        const option: any = {
          color: [
            '#1A89E2',
            '#E29A02',
            '#DDD903',
            '#06F29E',
            '#21FF63',
            '#FC5D00',
            '#d1bc19',
            '#b5116b',
            '#c91cd3',
            '#59b9d7',
            '#c92c5d',
          ],
          grid: {
            left: 10,
            top: 10,
            right: 10,
            // bottom: 10,
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br />{b}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{d}%',
          },
          series: [
            {
              name: '上月用水',
              type: 'pie',
              center: isRose ? ['35%', '50%'] : ['40%', '50%'],
              roseType: 'radius',
              // roseType: 'area',
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              data: _data.map((item) => {
                return {
                  name: item.name,
                  value: item.value
                }
              }),
            },
          ],
        };
        if (!isRose) {
          // 不是玫瑰图就设置环形
          option.series[0].radius = ['40%', '60%'];
          option.series[0].roseType = false;
        }
        myChart.setOption(option);
      }
      window.addEventListener('resize', () => {
        myChart?.resize();
      });
    },
    {
      flush: 'post',
    },
  );
};

export default Comp;
